<template>
    <section class="chat-group-wrapper">
        <section>
            <template v-for="(g, index) of chatState.chatList" :key="g.id">
                <section class="chat-group-item" v-if="g.friendId !== chatState.getUserInfo()?.id"
                    :class="[chatState.currentChatTargetId === g.friendId ? 'active-group' : '']"
                    @click="toggleGroup(g, index)">
                    <section v-if="g.chatType == 1">
                        <el-badge :value="g.value" class="item" :hidden="g.value === 0">
                            <img class="group-item-avarta" @error="defaultAvatar" :src="g.friendAvatar || defaultAvatar"
                                alt="">
                        </el-badge>
                    </section>
                    <section v-if="g.chatType == 2">
                        <el-badge :value="g.value" class="item" :hidden="g.value === 0">
                            <img src="../assets/images/group.png">
                            <!-- <el-icon size="40">
                                <svg t="1722762116831" class="icon" viewBox="0 0 1109 1024" version="1.1"
                                    style="min-height: 40px;" xmlns="http://www.w3.org/2000/svg" p-id="939">
                                    <path
                                        d="M848.042667 542.976c-4.010667 0-44.202667 8.021333-16.128-72.362667 56.32-80.384 100.522667-148.650667 100.522666-245.077333C932.437333 80.896 836.010667 8.533333 723.456 8.533333c-20.053333 0-40.106667 4.010667-56.234667 8.021334 44.202667 40.192 72.362667 96.426667 72.362667 180.906666 0 104.362667-24.149333 200.789333-88.405333 289.28-24.149333 32.085333-16.128 80.298667 8.021333 88.32 136.533333 36.181333 253.098667 128.597333 285.269333 217.002667l4.010667 24.064c0 36.181333-44.202667 68.266667-60.245333 88.405333 124.586667-12.032 212.906667-44.202667 212.906666-120.490666v-28.16c4.010667-76.373333-132.608-172.8-253.098666-212.906667z"
                                        fill="#F58D23" p-id="940"></path>
                                    <path
                                        d="M562.773333 615.253333c-8.021333-4.010667-44.202667-20.053333-20.138666-92.416 64.341333-64.256 112.554667-172.8 112.554666-277.248C655.189333 84.906667 550.741333 0.512 426.154667 0.512 301.568 4.522667 197.12 88.917333 197.12 245.589333c0 104.448 48.213333 208.981333 112.469333 277.333334 24.149333 64.170667-20.053333 88.32-28.16 92.330666C153.002667 663.466667 0.341333 747.861333 0.341333 832.256v32.085333c-4.010667 116.565333 221.013333 140.629333 425.813334 140.629334 204.970667 0 425.984-24.064 425.984-140.629334v-32.085333c0-84.48-152.746667-172.8-289.28-217.002667z"
                                        fill="#F58D23" p-id="941"></path>
                                </svg>
                            </el-icon> -->
                        </el-badge>
                    </section>
                    <section class="group-info-wrapper">
                        <p class="group-item-name-time">
                            <span class="group-item-name">{{ g.friendNickname || g.groupName }}</span>
                            <span class="group-item-time">{{ g.time }}</span>
                        </p>
                        <!-- <p class="group-message">{{ g.lastMessage }}</p> -->
                        <p class="group-message">{{ g.lastMessage }}</p>
                        <!-- <p class="group-message" v-if="g.contentType === 2">图片</p> -->
                    </section>
                </section>
            </template>
        </section>
        <p class="not-chat" v-show="!chatState.chatList.length">暂无聊天记录</p>
    </section>
</template>

<script setup>
import { ChatMessage } from '@/stores/chat';
import { defaultAvatar } from '@/utils';

const chatState = ChatMessage()
const emit = defineEmits([''])

const toggleGroup = (g, n) => {
    chatState.setChatType(g.chatType)
    chatState.readyAllMessage(g.friendId)
    chatState.setCurrentTargetFriendId(g.friendId)
    emit('toggleGroup', g)

}


</script>

<style lang="scss">
.not-chat {
    font-weight: normal;
    text-align: center;
    color: #888;
    padding: 20px 0;
    box-sizing: border-box;
}

.chat-group-wrapper {
    width: 220px;
    height: 620px;
    border-right: 1px solid #303235;

    .active-group {
        background: #f1f1f1;
    }

    .chat-group-item {
        display: flex;
        align-items: center;
        padding: 12px 0;
        padding-left: 10px;
        cursor: pointer;

        &:hover {
            background: #dbdbdb;
        }

        .group-info-wrapper {
            flex: 1;
            margin-left: 10px;
        }

        .group-item-avarta {
            width: 40px;
            height: 40px;
            border-radius: 5px;
            min-height: 40px;
            object-fit: cover;
        }

        .group-item-name-time {
            display: flex;
            justify-content: space-between;

            .group-item-name {
                width: 70px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #f5f5f5;
            }

            .group-item-time {
                margin-right: 10px;
                font-size: 12px;
                color: #929292;
            }
        }

        .group-message {
            width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #b6b6b6;
            font-weight: normal;
        }
    }
}
</style>